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ABSTRACT 

This brief paper considers the application of "universal 
design" principles to Web page design in order to increase accessibility for 
people with disabilities. Suggestions are based on the World Wide Web 
Consortium’s accessibility initiative, which has proposed guidelines for all 
Web authors and federal government standards. Seven guidelines for general 
page design include maintain a simple, consistent page layout throughout the 
site; keep background simple and with enough contrast; design large buttons; . 
and include a note about accessibility. Examples of six guidelines for 
graphical and audio features are: include appropriate ALT/LONGDESC attributes 
for graphical elements on your page; include menu alternatives for image maps 
to ensure that embedded links are accessible; include descriptive captions 
for pictures and transcriptions of manuscript images; and provide audio 
description and captions or transcripts of video. Among suggestions for 
special Web page features are the sparing use of tables and frames; provision 
of alternatives for forms and databases; and provision of alternatives for 
content in applets and plug-ins. Finally, the paper urges developers to test 
the Web site with various Web browsers. Following a list of 13 resource Web 
sites, the paper lists contact and other information resources associated 
with Project DO-IT at the University of Washington. (DB) 
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The World Wide Web has rapidly become the 
dominant Internet tool, combining hypertext 
and multimedia to provide a network of 
educational, governmental, and commercial 
resources. The Web has mushroomed in 
popularity because it is such a powerful and 
versatile medium. Much of its power comes 
from the fact that it presents information in a 
variety of formats while it also organizes that 
information through hypertext links. 

Because of the multimedia nature of the Web 
combined with the poor design of some Web 
sites, many Internet surfers cannot use the full 
range of resources this revolutionary tool 
provides. Some visitors: 

• Cannot see graphics because of visual 
impairments. 

• Cannot hear audio because of hearing 
impairments. 

• Use slow connections and modems or 
older equipment that cannot download 
large files. 

• Have difficulty navigating sites that are 
poorly organized with unclear directions 
because they have learning disabilities, 
speak English as a second language, or are 
younger than the average user. 

Some people use assistive technology with 
their computer to access the Web. For ex- 
ample, a person who is blind may use a 
speech output system that reads aloud text 
presented on the screen; tills system may be 
composed of screen reading software and a 
speech synthesizer. A person with a mobility 
impairment may not be able to use a mouse 
and rely on the keyboard for Web browsing. 
To create resources that can be used by the 
widest spectrum of potential visitors rather 
than an idealized "average," Web page de- 
signers should apply "universal design" 
principles. They should consider the special 
needs of individuals with disabilities, older 
persons, people for whom English is a second 



language, and those using outdated hardware 
and software. 

Universal design techniques can be applied in 
the design of packaging, software, appliances, 
transportation systems and many other 
products and services. Examples of universal 
design in architecture are the inclusion of 
ramps and automatic door openers as well as 
Braille labels on elevator control buttons. 
Following universal design principles in 
creating a Web resource ensures that all 
Internet users can get to the information at a 
Web site regardless of their abilities, their 
disabilities, or the limitations of their 
equipment and software. 

The Americans with Disabilities Act (ADA) of 
1990 requires that U.S. programs and services 
be accessible to individuals with disabilities. 

A 1996 Department of Justice ruling makes it 
clear that ADA accessibility requirements 
apply to Internet resources. 

The World Wide Web Consortium (W3C) 
develops the common protocols used on the 
Web to insure interoperability to promote 
universal access (http:llioiow.w3. orglWAII). 

The W3C's Web Accessibility Initiative (WAI) 
has proposed guidelines for all Web authors. 
As Tim Berners-Lee, Director of the W3C puts 
it: 

"The power of the Web is in its universality. 
Access by everyone regardless of disability 
is an essential aspect." 

In 2001 the U.S. Architectural and Transporta- 
tion Barriers Compliance Board (Access 
Board) developed standards to which Web 
pages of federal agencies must comply (http:ll 
iowio.access-board.govlsec508l508standards.htm). 
The Teclmology Related Assistance for 
Individuals Act requires that the state 
agencies of states that accept funding under 
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this Act comply with Section 508. The list of 
guidelines for accessibility provides a good 
model even for organizations who are not 
required to comply. 

The following suggestions will help you get 
started designing accessible Web pages. They 
are based on the WAI guidelines and Section 
508 standards for Web content. 

General Page Design 

Designing a well-organized Web site helps 
visitors navigate through the information 
presented. 

• Maintain a simple, consistent page layout 
throughout your site. 

A consistent design and look makes it 
easier for visitors to locate the specific 
information they seek. For example, a 
feature presented on every page, such as a 
standard navigation menu or logo for the 
site, should always appear in the same 
place. A carefully planired organizational 
scheme will help everyone use your site. A 
clear, consistent presentation will espe- 
cially assist people with visual impair- 
ments or learning disabilities who have 
difficulty following disorganized presen- 
tations. 

• Keep backgrounds simple. Make sure 
there is enough contrast. 

People with low vision or colorblindness, 
or those using black and white monitors, 
can have difficulty reading information at 
sites with busy backgrounds and dark 
colors. Some background images and 
colors obscure text and make reading 
difficult. Make sure that there is enough 
contrast between your text and the 
background of the page. Choose back- 
ground, text and link colors carefully, and 
always test your site by viewing it at 



different resolutions and color depths. For 
example, you can change your monitor 
settings to a resolution of 640x480 and 16 
colors for one test, and change to 1024x768 
and 24 bit color for another. 

• Use standard HTML. 

Hypertext Markup Language (HTML) is 
the standard code used to create Web 
sites. HTML was designed to be a univer- 
sal format outside the bounds of propri- 
etary software and computer operating 
systems. The code works via tags that tell 
a Web browser where to find and how to 
display information. While nonstandard 
tags exist, using standard HTML as de- 
fined by the W3C will ensure that your 
content can be accessed by all browsers 
used by visitors to your site. Avoid tags, 
features and plug-ins that are available to 
only one brand or version of a browser. 

• Design large buttons. 

Small buttons marking links can be diffi- 
cult targets for visitors with mobility 
impairments that result in restricted hand 
movements. Larger buttons can make it 
easier for all visitors to select the links on 
your page. Test how your buttons appear 
and operate with a variety of monitor sizes 
and screen resolutions. 

• Caption video and transcribe other audio. 

Multimedia formats that include audio can 
present barriers to people with hearing 
impairments as well as to people with less 
sophisticated computer systems. Provide 
captions and transcriptions for these 
resources so visitors who cannot hear have 
an alternative method for accessing the 
information. 

• Make links descriptive so that they are 
understood out of context. 

Visitors who use screen reading software 
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can adjust their software to read only the 
links on a page. For this reason, links 
should provide enough information when 
read out of context. Use a more descriptive 
phrase than ''click here" as a link or next to 
a graphic used as a link. For example: 

<A HREF=" . /about . htm" >Click 
here</A> for information about 
our company. 

will present "Click here" as the link. 
However, 

<A HREF=" . about . htm" > 
Information about our company. 
</A> 

will display "Information about our com- 
pany." as the link text. 

• Include a note about accessibility. 

Notify site visitors that you are concerned 
about accessibility by including a Web 
access symbol on your page (see Resources 
list). Include a statement about accessibil- 
ity and encourage them to notify you with 
their accessibility concerns. For example, 
the DO-IT home page includes the follow- 
ing statement: 

The DO-IT pages form a living 
document and are regularly 
updated. We strive to make them 
universally accessible. You 
will notice that we minimize 
the use of graphics and photos, 
and provide descriptions of 
them when they are included. 
Video clips are open-captioned, 
providing access to users who 
can't hear the audio. Sugges- 
tions for increasing the 
accessibility of these pages 
are welcome. 



Graphical and Audio Features 

People who are blind cannot view the graphi- 
cal features of your Web site. Many people 
with visual impairments use speech output 
programs with nonstandard browsers (such 
as pwWebSpeak or Lynx) or graphical brows- 
ers with the feature that loads images turned 
off. Include text alternatives to make the 
content in graphical features accessible. De- 
scribed below are guidelines for providing 
alternative text for various types of visual 
features. 

• Include appropriate ALT/LONGDESC 
attributes for graphical elements on your 
page. 

ALT attributes work with HTML image 
tags to give alternative text descriptive 
information for graphical elements of a 
Web page. The alternative text helps 
visitors understand what is on the page if 
they are not viewing the graphic. This 
could be because they are blind and using 
a text-based browser or a graphical 
browser with the image loading feature 
turned off. The bold text in the following 
example shows what an ALT attribute 
looks like in HTML: 

<IMG SRC=" . /doit logo . large .gif" 

ALT=" [DO-IT LOGO] "> 

When a sighted visitor views the page 
with a graphical browser, he will see a 
picture of the DO-IT logo. When someone 
who is blind visits, his voice output pro- 
gram will read [DO-IT LOGO]. This gives 
him a clear idea of what is on the page. In 
addition, any visitor coming to the site 
using a text-based browser will under- 
stand that there is a DO-IT logo there 
instead of the more ambiguous "image," 
the default result when no ALT attribute is 
used. ALT attributes should be short (less 
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than 5 words) since browsers sometimes 
have difficulty displaying lengthy ALT 
text. 

When using text to describe complex 
graphs or charts, or to transcribe sound 
files containing speech or lyrics, summa- 
rize the information next to the element, or 
consider using the LONGDESC attribute 
which provides for more detailed text than 
ALT. Lengthy descriptions can also be 
linked to an external document or 
immediately follow the graphic or sound 
element. 

Include menu alternatives for image 
maps to ensure that the embedded links 
are accessible. 

In an image map (also called ISMAP), a 
part of a picture can be clicked to activate 
a link to another page. For example, on a 
map of the United States, a visitor might 
click on an image of the state of Oregon to 
find information about the state. If the 
Web page developer has not included an 
alternative menu, visitors using text-based 
browsers can be totally blocked from the 
site, or sent on a wild goose chase clicking 
unlabeled links. The following example 
does not include an alternative menu for 
the image map. 

<HTML> 

<TITLE>Our Library Page</TITLE> 
<BODY> 

<A HREF= " home . map" > 

<IMG SRC=" images/home . j pg" 

ISAMP> 

</A> 

</BODY> 

</HTML> 

When viewed through a graphical browser 
such as Netscape Navigator^“ or Internet 
Explorer^'^, a beautiful picture of a floor 



map of a library appears. The visitor can 
choose selected areas of the library to view. 
When a visitor using a text-based browser 
visits the site, this is what he sees: 

Our Library Page 
[ISMAP] 

At this point the visitor is stuck, because 
text-based browsers will not interpret the 
hypertext links embedded in the image 
map. His only option is to back out of the 
site. A visitor who uses a text-based 
browser, perhaps because he is blind, can't 
get to your information unless an 
alternative is provided. The accessibility of 
an image map depends on the software 
used as a Web site's server. Check with 
your system administrator to find out 
about the capabilities of your Web server 
software. Some server software will 
automatically render text links for image 
maps while other versions won't. 
Providing text alternatives to image-based 
links will ensure image maps are available 
to the widest audience. 

• Include descriptive captions for pictures 
and transcriptions of manuscript images. 

Providing ALT text for an image is 
sufficient for logos and graphics that 
contain little information content. 

However, if the graphics provide more 
extensive information, adding captions 
and transcriptions is important for those 
who cannot see your page because they 
are using a text-based browser or they 
have turned off the graphics loading 
feature of their browser. This includes 
people who are blind. If you are not sure 
how critical a particular image is to the 
content of a page, temporarily remove it 
and consider the impact of its loss. 
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If you present information in an image 
format, such as a scanned-in image of a 
page of a manuscript, be sure to also 
provide a transcription of the manuscript 
in a straight text format. This alternative is 
useful for many visitors, including those 
with visual impairments and those with 
learning disabilities who may have 
difficulty reading the original document. 

Use a NULL value for unimportant 
graphics. 

Some graphical elements may add no 
content to a page and can be bypassed 
from viewing by using an ALT attribute 
with no text. By using just two quotation 
marks with no content, you can reduce the 
amount of distracting text when a page is 
viewed with graphics capabilities turned 
off or with a text-based browser. For 
example, the HTML for a divider bar 
could be: 

<IMG SRC=" . /purplebar . gif " 

ALT=""> 

Sighted visitors will see the divider bar, 
while those visiting via a text browser will 
see /hear nothing. 

Provide audio description and captions 
or transcripts of video. 

If your multimedia resources provided on 
your site include video, people who can 
not see will be unable to use this informa- 
tion unless it is provided in an alternative 
format. A text transcription provided with 
the video will give a visitor who cannot 
see, or who doesn't have the appropriate 
viewing software, access to the informa- 
tion in your video clip. Captions and 
transcripts also provide access to the 
content for those who caimot hear. 



• Consider other options for making 
graphical features accessible. 

Some Web designers make an image 
accessible by placing a hyperlink "D" (for 
description) immediately before or after an 
image that links to another page with an 
image description. At the end of each 
description another hyperlink returns the 
user to the original page. This method 
should be used with caution as it can add 
unnecessary navigational complexity to 
the site. 

Some organizations with graphic-intensive 
Web pages provide a separate text version 
of their site to ensure accessibility. This 
adds maintenance time and complexity 
because two versions of a site must be 
updated. It also segregates site visitors 
according to the type of equipment they 
use to access the Web. As much as pos- 
sible, design a single version of your site 
so that it is accessible to all visitors. 

Special Features 

• Use tables and frames sparingly and 
consider alternatives. 

Most screen reader programs read from 
left to right, jumbling the meaning of 
information in tables. Some blind visitors 
can interpret tabular information, but it is 
best to look for other ways to present the 
information to ensure that visitors with 
visual impairments can reach your data. In 
the same vein, frames can be difficult for 
text-based screen reading software to 
access. Evaluate whether frames are truly 
necessary at your site. When frames are 
used available, ensure that frames are 
labeled with the TITLE attribute, provide a 
text alternative with NOFRAMES, and use 
the TARGET = "_top" attribute to ensure 
useful Uniform Resource Location (URL) 
addressing is provided for each interior frame. 



• Provide alternatives for forms and 
databases. 

Some combinations of browsers and 
screen readers encounter errors with 
nonstandard or complex forms. Always 
test forms and databases with a text-based 
browser. Include an e-mail address and 
other contact information for those who 
cannot use your forms or database. 

• Provide alternatives for content in 
applets and plug-ins. 

As future versions of software develop, 
applets (such as programs created with 
JavaScripP'^) and plug-ins (such as Adobe 
Acrobat™) may provide accessibility 
features. However, many of these 
programs are currently not accessible to 
people using text-based browsers. To 
ensure that people with visual and hearing 
impairments can access your information, 
provide the content from these programs 
in alternative, text-based formats. When 
using JavaScript, make sure to employ the 
built-in accessibility features within the 
Java Developer's Kit. 

Web Pages Test 

Test your Web site with a variety of Web 
browsers, and always test your pages with at 
least one text-based browser and with multi- 
media browsers with graphics and sound- 
loading features turned off. This way you will 
see your Web resources from the many per- 
spectives of your users. Also view the re- 
sources at your site using a variety of com- 
puter platforms, monitor sizes, and screen 
resolutions. Make sure you can access all of 
the features of your web site with the key- 
board alone; this test simulates the experience 
of web users who cannot use a mouse. Make 
use of a accessibility testing software such as 
A-Prompt, Bobby, and WAVE; they will point 
out elements that could be inaccessible. Re- 
vise your HTML to make your site accessible. 



Resources 

A-Prompt 

http://aprompt.snoiv.utoronto.ca/ 

ADA accessibility requirements apply to 
Internet Web pages. (1996). The Law Reporter. 
10(6), 1053-1084. 

Americans with Disabilities Act of 1990 
http://iowio.usdoj.gov/crt/ada/adahoml.htm 

Bobby, CAST (Center for Applied Special 
Technology) 

h t tp ://www. cas t. org/bobby/ 

DO-IT (Disabilities, Opportunities, 
Internetworking and Technology) - Accessible 
Web Page Design 

http://www.washington.edu/doit/Resources/web- 

design.html 

EASI (Equal Access to Software and Informa- 
tion) 

http://www.isc.rit.edu/~easi/ 

International Center for Disability Resources 
on the Internet 
h t tp://www. icdri. org/ 

Java accessibility resources 
http://www.sun.com/access/ 

National Center for Accessible Media 
(NCAM) resources 
http://ncam.wgbh.org/ 

Section 508 Standards of the Access Board 

http://www.access-board.gov/sec508/ 

508standards.htm 

Trace Research and Development Center 
http:/ /www. trace, wisc.edu/ 

WAVE (Web Accessibility Versatile Evaluator) 
http://www.temple.edu/inst_disabilities/piat/wave/ 
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W3C's Web Accessibility Initiative (WAI) 
h Up :j I WWW. zu3 . o rgl WAII 

World Wide Access Videotape 

A 11-minute videotape. World Wide Access: 
Accessible Web Design, introduces accessible 
Web design and may be purchased by send- 
ing $25 to DO-IT. You will receive an open 
captioned as well as an open captioned and 
audio described version. Permission is 
granted to reproduce DO-IT videotapes for 
educational, non-commercial purposes as 
long as the source is acknowledged. 



Grants and gifts fund DO-IT publications, 
videotapes, and programs to support the 
academic and career success of people with 
disabilities. Contribute today by sending a check 
to DO-IT, Box 355670, University of Washington, 
Seattle, WA 98195-5670. 

Your is tax deductible as specified in IRS 
regulations. Pursuant to RCW 19.09, the University of 
Washington is registered as a charitable organization 
with the Secretary of State, State of Washington. For 
more information, call the Office of the Secretary of 
State, 800-322-4483. 



About DO-IT 

DO-IT (Disabilities, Opportunities, Internet- 
working, and Teclrnology) serves to increase the 
successful participation of individuals with 
disabilities in challenging academic programs 
and careers, such as those in science, engineer- 
ing, mathematics, and technology. Primary 
funding for the DO-IT program is provided by 
the National Science Foundation, the State of 
Washington, and U.S. Department of Education. 
This publication was developed with funding 
from the National Science Foundation (grant 
#9800324). However, the contents do not 



necessarily represent the policy of the federal 
government, and you should not assume their 
endorsement. For more information, to be 
placed on the DO-IT mailing list, or to request 
materials in an alternate format, contact: 

DO-IT 

University of Washington 
Box 355670 

Seattle, WA 98195-5670 
doit@u. xvashington.edu 
http:llxuxuxu. wash i ngton. edu/doi t/ 

206-221-4171 (FAX) 

206-685-DOIT (3648) (voice /TTY) 
888-972-DOIT (3648) (voice /TTY) WA, 
outside Seattle 

509-328-9331 (voice /TTY) Spokane 
Director: Sheryl Burgstahler, Ph.D. 

Copyright © 2001, 1999, 1997, University of 
Washington. Permission is granted to copy 
these materials for educational, non- 
commercial purposes provided the source is 
acknowledged. 
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